<template>
  <list-page>
    <pub-search
      v-model:searchColumns="searchColumns"
      v-model:search-form="searchForm"
      mask-append-to="table-content"
      @search="search"
    >
      <template #leftBtn>
        <el-button type="primary" @click="addHandle" :icon="Plus">
          新增
        </el-button>
      </template>
    </pub-search>
    <pub-table
      ref="pubTable"
      :column="columns"
      :data="tableData"
      :loading="tableLoading"
    >
      <template v-slot:option="scope">
        <el-button plain type="primary" @click="edit(scope.row)">
          编辑
        </el-button>
        <el-button plain type="primary" @click="del(scope.row.id)">
          删除
        </el-button>
        <el-button plain type="primary" @click="editChildren(scope.row)">
          维护子级
        </el-button>
      </template>
    </pub-table>
    <pub-pagination
      :total="pagination.total"
      v-model:page="pagination.page"
      v-model:limit="pagination.pageSize"
      @pagination="pagination.change"
    ></pub-pagination>
    <pub-dialog
      v-if="editDialogVisible"
      title="编辑字典"
      v-model:visible="editDialogVisible"
      width="1000px"
      :hasExtraBtn="true"
    >
      <editDialog
        @cancel="cancelEditHandle"
        :isEditChild="isEditChild"
        :currentPid="currentPid"
        :isSystem="isSystem"
      />
    </pub-dialog>
  </list-page>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useTable } from '@/hooks/UseTable'
import { getSysDictList, deleteDictById, getBusDictList } from '@/api/dict.js'
import editDialog from './components/edit.vue'
const props = defineProps({
  isSystem: {
    type: Number,
    default: 1
  }
})
const searchColumns = ref([
  {
    label: '字典名称',
    el: 'Input',
    bind: 'name',
    defaultValue: '',
    labelWidth: 80
  },
  {
    label: '字典编码',
    el: 'Input',
    bind: 'code',
    defaultValue: '',
    labelWidth: 80
  },
  {
    label: '字典类型',
    el: 'DictSelect',
    bind: 'type',
    defaultValue: '',
    code: 'ZDLX',
    labelWidth: 80
  }
])
const columns = ref([
  { label: '字典名称', prop: 'name' },
  { label: '字典编码', prop: 'code' },
  { label: '字典状态', prop: 'status', type: 'formatDict', formatCode: 'ZDZT' },
  { label: '字典类型', prop: 'type', type: 'formatDict', formatCode: 'ZDLX' },
  { label: '操作', type: 'option', width: '380' }
])

const editDialogVisible = ref(false)
const isEditChild = ref(false)
const currentPid = ref('')

let { tableData, search, getList, pagination, searchForm, tableLoading } =
  useTable(props.isSystem === 1 ? getSysDictList : getBusDictList, {
    pid: 0
  })
const router = useRouter()
const edit = row => {
  currentPid.value = row.id
  isEditChild.value = false
  editDialogVisible.value = true
}

const editChildren = row => {
  currentPid.value = row.id
  isEditChild.value = true
  editDialogVisible.value = true
}

// 删除字典
const del = id => {
  ElMessageBox.confirm('确认删除选择的记录？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const res = await deleteDictById(id)
      if (res.succeed) {
        getList()
        ElMessage({
          type: 'success',
          message: res.msg
        })
      }
    })
    .catch(() => {})
}

const addHandle = () => {
  isEditChild.value = false
  currentPid.value = ''
  editDialogVisible.value = true
}

const cancelEditHandle = () => {
  editDialogVisible.value = false
  getList()
}
onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped></style>
